<template>
	<div class="page flex flex-item-v-center flex-nowarp flex-c" :style="{backgroundImage:'url(' + imgs + ')'}">

		<div class="one-box">
			<div class="goods-list" :class= "[index==3 ? 'two-box':(index==9 ? 'tree-box':(index==11 ?'margin-bottom':''))]" @click="goGoods(item.id)" v-for="(item,index) in goodsdata" :style="{backgroundImage: 'url(' + item.img + ')'}">
				<template v-if="(index+1)%2==0">
					<div class="flex flex-item-v-start flex-item-l-center box-right flex-c">
						<div class="title flex flex-item-center">{{item.title}}</div>
						<div class="pMain flex flex-item-center">{{item.pMain}}</div>
						<div class="pTitle flex flex-item-center">{{item.pTitle}}</div>
						<div class="price flex flex-item-center">非会员价:¥{{item.price}}</div>
						<div class="vipPrice flex flex-item-center">
							<div class="title-text flex flex-item-center">会员价: <span>¥{{item.VipPrice}}</span></div>
						</div>
					</div>
				</template>
				<template v-else="">
					<div class="flex flex-item-v-end flex-item-l-center box-right flex-c">
						<div class="title flex flex-item-center">{{item.title}}</div>
						<div class="pMain flex flex-item-center">{{item.pMain}}</div>
						<div class="pTitle flex flex-item-center">{{item.pTitle}}</div>
						<div class="price flex flex-item-center">非会员价:¥{{item.price}}</div>
						<div class="vipPrice flex flex-item-center">
							<div class="title-text flex flex-item-center">会员价: <span>¥{{item.VipPrice}}</span></div>
						</div>
					</div>

				</template>
			</div>
		</div>
	</div>
</template>

<script>
	import http from '@/util/http'
	import Api from '@/util/api'
	import utils from '@/util/util'
	export default {
		data() {
			return {
				imgs:require('../../../assets/imgs/20180515/ysnd-bg.jpg'),
				goodsdata: [{
					id: '6580',
					img: require('../../../assets/imgs/20180515/goods1.jpg'),
					title: 'Estee Lauder/雅诗兰黛',
					pTitle: '“密集修复  持久保湿”',
					pMain: '肌透修护眼部密集精华露 15ml',
					price: '448',
					VipPrice: '368'
				}, {
					id: '4773',
					img: require('../../../assets/imgs/20180515/goods2.jpg'),
					title: 'Estee Lauder/雅诗兰黛',
					pTitle: '“革新净化  根源修复”',
					pMain: '特润修护肌透精华露(第六代小棕瓶)50ml',
					price: '688',
					VipPrice: '568'
				}, {
					id: '6612',
					img: require('../../../assets/imgs/20180515/goods3.jpg'),
					title: 'Estée Lauder 雅诗兰黛',
					pTitle: '“淡化细纹  改善黑圆圈”',
					pMain: 'ANR小棕瓶眼部精华眼霜 15毫升',
					price: '428',
					VipPrice: '359'
				}, {
					id: '6395',
					img: require('../../../assets/imgs/20180515/goods4.jpg'),
					title: 'Estee Lauder/雅诗兰黛',
					pTitle: '“远离黯沉  水润鲜活”',
					pMain: '红石榴能量水 清爽型 200ml',
					price: '368',
					VipPrice: '298'
				}, {
					id: '6578',
					img: require('../../../assets/imgs/20180515/goods5.jpg'),
					title: 'Estee Lauder/雅诗兰黛',
					pTitle: '“独特细闪  唇间星光”',
					pMain: '花漾倾慕唇膏 260号色 Eccentric',
					price: '258',
					VipPrice: '218'
				}, {
					id: '3534',
					img: require('../../../assets/imgs/20180515/goods6.jpg'),
					title: 'Estee Lauder/雅诗兰黛',
					pTitle: '“浓郁色泽  透出光彩”',
					pMain: 'Double Wear 凝彩纤长睫毛膏 6ml',
					price: '308',
					VipPrice: '253'
				}, {
					id: '6585',
					img: require('../../../assets/imgs/20180515/goods7.jpg'),
					title: 'Estée Lauder 雅诗兰黛',
					pTitle: '“滑顺轻盈  高效保湿”',
					pMain: '持久粉底液 象牙白#17 30ml',
					price: '358',
					VipPrice: '295'
				}, {
					id: '3531',
					img: require('../../../assets/imgs/20180515/goods8.jpg'),
					title: 'Estee Lauder/雅诗兰黛',
					pTitle: '“消除浮肿  补充水份”',
					pMain: 'Stress Relief 舒缓眼膜10片/盒',
					price: '318',
					VipPrice: '261'
				}, {
					id: '3516',
					img: require('../../../assets/imgs/20180515/goods9.jpg'),
					title: 'Estée Lauder 雅诗兰黛',
					pTitle: '“复原肌肤  鲜活光彩”',
					pMain: '青春抗皱滋润眼霜15ML',
					price: '458',
					VipPrice: '368'
				}, {
					id: '3498',
					img: require('../../../assets/imgs/20180515/goods10.jpg'),
					title: 'Estee Lauder/雅诗兰黛',
					pTitle: '“持久保湿  深层修护”',
					pMain: '红石榴鲜活焕采面霜50ml',
					price: '498',
					VipPrice: '418'
				}, {
					id: '5766',
					img: require('../../../assets/imgs/20180515/goods11.jpg'),
					title: 'Estée Lauder 雅诗兰黛',
					pTitle: '“睡眠修护力  深透滋润”',
					pMain: '小棕瓶ANR面部修护套装',
					price: '1099',
					VipPrice: '910'
				}, {
					id: '5768',
					img: require('../../../assets/imgs/20180515/goods12.jpg'),
					title: 'Estee Lauder/雅诗兰黛',
					pTitle: '“持久保湿  深层修护”',
					pMain: '红石榴鲜活焕采面霜50ml',
					price: '868',
					VipPrice: '758'
				}]
			}
		},
		methods:{
			goGoods(id){
				utils.goGoods(id)
			}
		}

	}
</script>

<style lang="less" rel="stylesheet/less" scoped="scoped">
	@import './css/index.less';
</style>